<template>
  <div class="wrap">
    <div class="top">
      <div class="top_left">
        <van-uploader v-model="fileList" v-show="my" multiple :max-count="1" />
        <van-uploader v-show="!my" multiple :max-count="1" />
      </div>
      <div class="top_right">
        <p @click="gologin" v-show="!isShow">请先登录</p>
        <div class="ji">积分{{666}}</div>
        <p style="font-size:20px;margin:8px 0" v-show="isShow" @click="exit">退出登录</p>
      </div>
    </div>
    <!-- 通知栏 -->
    <van-notice-bar
      background="#fff"
      color="red"
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <!-- 引入订单 -->
    <Order />
    <!-- 引入底部 -->
    <UserBottom />
  </div>
</template>

<script>
import MANA from "../storage/constant";
import PATH from "../router/constant";
import UserBottom from "./user/Bottom";
import Order from "./user/Order";
export default {
  components: {
    Order,
    UserBottom,
  },
  data() {
    return {
      fileList: [{ url: "https://img.yzcdn.cn/vant/leaf.jpg" }],
      isShow: false,
      my:true
    };
  },
  created() {
    if (!this.$storage.getToken(MANA.TOKEN)) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
  },
  methods: {
    gologin() {
      this.$router.goNext(PATH.LOGIN);
    },
    exit() {
      this.$toast('退出成功');
      this.$storage.removeToken(MANA.TOKEN);
      this.my = false;
      this.isShow = false;
    },
  },
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 90vh;
  background: #eee;
}
.top {
  width: 100%;
  height: 200px;
  background: #c1b18f;
  display: flex;
  align-items: center;
}
.top_left {
  margin: 0 0 0 25px;
}

.top_right p {
  height: 45px;
  color: white;
  font-size: 40px;
  font-weight: 500;
}
.top_right div {
  width: 100px;
  height: 45px;
  line-height: 45px;
  box-sizing: border-box;
  padding: 0 20px;
  background: rgba(0, 0, 0, 0.295);
  color: white;
  border-radius: 5px;
}
</style>